<template>
    <div class="hsindex">
        <!-- 主体部分可滚动 -->
        <scroll ref="scroll" class="scroll-content" :data="lunbotu">
            <div>
                <!-- 轮播图 -->
                <div v-if="lunbotu.length" class="slider-wrapper">
                    <slider>
                        <div v-for="item in lunbotu">
                            <a href="javascript:void(-1)">
                                <img class="needsclick" width="100%" @load="loadImage" :src="item.img">
                            </a>
                        </div>
                    </slider>
                </div>
                <!-- 免费估价按钮 -->
                <router-link class="search-btn" tag="div" :to="'/hschoice'" v-if="hot_brand.length">
                    <button-medium text="马上估价"></button-medium>
                </router-link>
                <!-- 九宫格,热门品牌回收 -->
                <div class="nine">
                    <nine-frame :data="hot_brand"></nine-frame>
                </div>
                <!-- 大家都在卖,热门型号，卡片视图 -->
                <div class="hot">
                    <div class="hot-top" v-if="hot_brand.length">
                        <div class="title">热卖机型</div>
                        <router-link class="right" tag="div" :to="'/hschoice'">
                            更多<span class="icon iconfont icon-enter"></span>
                        </router-link>
                    </div>
                    <div class="hot-middle">
                        <router-link :to="'/hsfault?bid='+item.brand_id+'&mid='+item.model_id" class="item" v-for="item in hot_model" :key="item.model_id">
                            <div class="item-img">
                                <img width="55" height="55" v-lazy="item.img" />
                            </div>
                            <div class="item-text">
                                <div class="title">{{item.brand}}{{item.model}}</div>
                                <div class="most">最高回收价</div>
                                <div class="price">￥{{item.top_price}}</div>
                            </div>
                        </router-link>
                    </div>
                </div>
                <!-- 回收流程 -->
                <div class="process">
                    <div class="process-wrapper">
                        <h1 class="title">回收流程</h1>
                        <div class="process-content">
                            <div class="item">
                                <div class="pic">
                                    <span class="icon iconfont icon-shouji"></span>    
                                    <i class="icon iconfont icon-enter"></i>    
                                </div>
                                <div class="text">旧机估价</div>
                            </div>
                            <div class="item">
                                <div class="pic">
                                    <span class="icon iconfont icon-che"></span>  
                                    <i class="icon iconfont icon-enter"></i>                                          
                                </div>
                                <div class="text">下单邮寄</div>
                            </div>
                            <div class="item">
                                <div class="pic">
                                    <span class="icon iconfont icon-erji-xunijianquanjiancha"></span>
                                    <i class="icon iconfont icon-enter"></i>                                        
                                </div>
                                <div class="text">专业质检</div>
                            </div>
                            <div class="item">
                                <div class="pic">
                                    <span class="icon iconfont icon-gerenjiekuanjiekuan"></span>
                                </div>
                                <div class="text">立即汇款</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </scroll>
        <!-- 底部固定栏目 -->
        <bottom-bar></bottom-bar>
    </div>
</template>

<script>
import Loading from '../../base/loading/loading.vue'    //加载小图标
import Slider from '../../base/slider/slider.vue'       //轮播图
import Scroll from '../../base/scroll/scroll.vue'       //缓动框架
import BottomBar from '../parts/bottomBar.vue'        //底部导航栏
import ButtonMedium from '../parts/buttonMedium.vue'    //按钮
import NineFrame from '../parts/nineFrame.vue'          //九宫格

export default {
    data() {
        return {
            lunbotu: [],          //轮播图
            hot_model: [],          //热门品牌
            hot_brand: [],          //热门型号
        }
    },
    props: {},
    created() {
        this.getLunbotu()
        this.getBrand()
        this.getModel()
    },
    components: {
        Loading, Slider, Scroll, BottomBar,ButtonMedium, NineFrame
    },
    methods: {
        // 获取lunbotu
        async getLunbotu(){
            try {
                var result = await this.$ajax.get('/lunbo')
                if(result.status == 200) {
                    this.lunbotu = result.data
                    // console.log(this.lunbotu)
                }
            } catch(err) {
                console.log('获取轮播图失败！')
            }
        },
        // 获取热门品牌
        async getBrand(){
            try {
                var result = await this.$ajax.get('/hot_brand')
                if(result.status == 200) {
                    this.hot_brand = result.data
                    var img = [        //热门品牌图片地址
                        "./src/common/image/hot_brand1.png",
                        "./src/common/image/hot_brand2.png",
                        "./src/common/image/hot_brand3.png",
                        "./src/common/image/hot_brand4.png"
                    ]
                    this.hot_brand.forEach((item, index)=> {
                        item.img = img[index]
                    })
                    // console.log(this.hot_brand)
                    
                }
            } catch(err) {
                console.log('获取banner失败！')
            }
        },
        // 获取热门型号
        async getModel(){
            try {
                var result = await this.$ajax.get('/hot_model')
                if(result.status == 200) {
                    this.hot_model = result.data
                    // console.log(this.hot_model)
                }
            } catch(err) {
                console.log('获取banner失败！')
            }
        },
        //轮播图图片加载了(只加载第一张，节省内存)
		loadImage(){
			//调用scroll的refresh方法,重新计算页面高度
			if(!this.checkLoaded){
				this.$refs.scroll.refresh()
				this.checkLoaded = true
			}
		}

    }
}
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    .hsindex{
        //加载中
        .loading-wrapper{
            position:fixed;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
        }
        //中间可滚动
        .scroll-content{
            // height:100%;
            bottom:50px;
            
            overflow:hidden;
            //查看估价按钮
            .search-btn{
                width:100%;
                box-sizing:border-box;
            }
            //轮播图
            .slider-wrapper{
                position:relative;
                max-width:100%;
                margin:20px 10px 20px;
                border-radius: 5px;
                box-sizing:border-box;
                overflow: hidden;
                box-shadow:@box-shadow;
            }
            //九宫格
            .nine{
                padding:10px 0 20px;
                box-sizing:border-box;
            }
            //大家都在卖
            .hot{
                width:100%;
                background:@color-gray-bg;
                padding:25px 10px 10px;
                box-sizing:border-box;
                .hot-top{
                    color:#323136;
                    height:16px;
                    line-height:16px;
                    font-size:0;
                    margin-bottom:20px;
                    .title{
                        display:inline-block;
                        font-size:14px;
                        height:16px;;
                        line-height:inherit;
                    }
                    .right{
                        float:right;
                        font-size:14px;
                        color:#636267;
                        span{
                            display:inline-block;
                            height:inherit;
                            line-height:inherit;
                            vertical-align:top;
                            color:#666;
                        }
                    }
                }
                .hot-middle{
                    width:100%;
                    display:flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .item{
                        flex: 0 0 48.5%;
                        background: #fff;
                        display: flex;
                        padding: 16px 0;
                        margin: 0 0 10px;
                        border-radius: 5px;
                        box-shadow: @box-shadow;
                        &:nth-child(2n){
                            margin-right:0;
                        }
                        .item-img{
                            flex:0 0 55px;
                            margin-left:5px;
                        }
                        .item-text{
                            flex:1;
                            margin-left:10px;
                            display:flex;
                            flex-direction:column;
                            align-items:stretch;
                            justify-content:space-between;
                            .title{
                                color:#3a3a3a;
                                font-size:14px;
                            }
                            .most{
                                color:#868686;
                                font-size:10px;
                            }
                            .price{
                                color:#ff5930;
                                font-size:14px;
                                
                            }
                        }
                    }
                }
            }
            //四步变现
            .process{
                padding:25px 10px 40px;
                .title{
                    font-size:14px;
                    color:#333;
                    margin-bottom:30px;
                }
                .process-content{
                    display:flex;
                    .item{
                        flex:1;
                        text-align:center;
                        .pic{
                            height:30px;
                            margin-bottom:15px;
                            position:relative;
                            font-size:14px;
                            span{
                                display:block;
                                line-height:27px;
                                font-size:30px;
                                color:#555;
                            }
                            i{
                                display:inline-block;
                                position:absolute;
                                top:50%;
                                right:0;
                                line-height:27px;
                                color:#dfdfdf;
                                transform:translate(50%, -50%);
                            }
                        }
                        .text{
                            font-size:10px;
                            color:#868686;
                        }
                        &:nth-child(1){
                            span{
                                font-size:30px;
                            }
                        }
                        &:nth-child(2){
                            span{
                                font-size:30px;
                            }
                        }
                        &:nth-child(3){
                            span{
                                font-size:28px;
                            }
                        }
                        &:nth-child(4){
                            span{
                                font-size:36px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
